<template>
  <view>
    <!-- 搜索 -->
    <Yg-search></Yg-search>
    <!-- 
        轮播图
            :list="swiperList"   遍历数组
            keyName="image_src"  指定图片名
            indicator            自动轮播
            indicatorMode="line" 显示图片索引
            circular             无缝衔接
     -->
    <u-swiper
      :list="swiperList"
      keyName="image_src"
      indicator
      indicatorMode="line"
      circular
      height="340rpx"
    >
    </u-swiper>

    <view class="navs">
      <!-- 导航栏 -->
      <navigator v-for="item in navs" :key="item.name">
        <!-- 图片 mode="widthFix"高度自适应  -->
        <u--image :src="item.image_src" width="100%" mode="widthFix"></u--image>
      </navigator>
    </view>

    <!-- 楼层 -->
    <view class="floor">
      <view
        class="floor-group"
        v-for="item1 in floorList"
        :key="item1.floor_title.name"
      >
        <!-- 4.1 标题 -->
        <view class="floor-group-title">
          <u--image
            width="100%"
            mode="widthFix"
            :src="item1.floor_title.image_src"
          ></u--image>
        </view>
        <!-- 4.2 内容 -->
        <view class="floor-group-content">
          <navigator
            v-for="(item2, index2) in item1.product_list"
            :key="item2.name"
          >
            <u--image
              v-if="index2 === 0"
              width="100%"
              mode="widthFix"
              :src="item2.image_src"
            ></u--image>

            <u--image
              v-else
              width="100%"
              height="188rpx"
              mode="scaleToFill"
              :src="item2.image_src"
            ></u--image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数组
      swiperList: [],
      // 导航数组
      navs: [],
      //楼层数组
      floorList: [],
    };
  },
  async onLoad() {
    // 轮播图数据

    // const [err, result] = await uni.request({
    //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
    // });
    // //   console.log(32,result);
    // this.swiperList = result.data.message;
    // // 导航数据
    // const { message: navs } = await uni.$u.http.get("/home/catitems");
    // this.navs = navs;
    // const [err1, result1] = await uni.request({
    //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
    // });
    // // console.log(result1);
    // this.navs = result1.data.message;
    // //楼层数据
    // const { message: floorList } = await uni.$u.http.get("/home/floordata");
    // this.floorList = floorList;
    // const [err2, result2] = await uni.request({
    //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata",
    // });
    // console.log(result2);
    // this.floorList = result2.data.message;

    //调用触发函数
    Promise.all([this.gtiSwiperList(), this.getNavs(), this.getFloorList()]);
  },
  methods: {
    // 轮播图数据
    async gtiSwiperList() {
      const { message: swiperList } = await uni.$u.http.get("/home/swiperdata");
      this.swiperList = swiperList;
    },
    // 获取导航
    async getNavs() {
      console.log("2");
      const { message: navs } = await uni.$u.http.get("/home/catitems");
      this.navs = navs;
      console.log("2 end");
    },
    // 获取楼层
    async getFloorList() {
      console.log("3");
      const { message: floorList } = await uni.$u.http.get("/home/floordata");
      this.floorList = floorList;
      console.log("3 end");
    },
  },
};
</script>
<style lang="scss" scoped>
.navs {
  display: flex;
  navigator {
    flex: 1;
    padding: 20rpx;
  }
}
.floor {
  .floor-group-content {
    // 清除浮动
    overflow: hidden;
    navigator {
      width: 232rpx;
      margin-left: 15rpx;
      float: left;

      /* 
      几张图片的大小不一致 无法直接使用图片高度自适应的设置 
      得要靠自己去计算图片的高度
      1 第一张图片的高度 当时可以使用高度自适应。。
      2 后四张图片的高度，手动去计算，高度等于第一张图片高度的一半即可！！ 
      
       */

      /* 后四个导航标签 */
      // &:nth-last-child(-n + 4) {
      //   image {
      //     height: 188rpx;
      //   }
      // }

      &:nth-last-child(-n + 2) {
        // 后两个导航标签
        margin-top: 15rpx;
      }
    }
  }
}
</style>